<template>
	<view class="dramaBoxAll">
		<view class="isMask" @click="isClose"></view>
		<view class="zwyNextContentNomal" :class="videoChooseShow == 1 ? 'isTranf' : ''">
			<image class="isBg" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/bg_nextTheater.png"></image>
			<view class="close" @click="isClose">
				<image style="width:31rpx;height:31rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/comment_close.png"></image>
			</view>
			<view class="zwyNextDes">
				<view class="zwyNextDesLine">您已看完该剧,</view>
				<view class="zwyNextDesLine">为您推荐下一部剧集</view>
			</view>
			<view @click.stop="toNext" class="zwyNextBtn">立即观看 | {{ isTime }}s</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	name: 'zwyNextTheater',
	props: {
		compInfo: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			isTime: '',
			videoChooseShow: '',
			showType: '',
			nextId: '',
			nextTheater: ''
		};
	},
	methods: {
		getNextTheater() {
			console.log('this.compInfo', this.compInfo);
			this.zwyRequest({
				url: `/cdp/compilations/was_over/next_theater/${this.compInfo.id}?enableDouYinAd=true`,
				method: 'GET'
			}).then(res => {
				console.log('getNextTheater', res);
				if (res) {
					this.nextId = res.id;
					this.nextTheater = res;
				}
			});
		},
		isClose() {
			clearInterval(this.timer);
			this.timer = null;
			if (this.videoChooseShow == 0) return;
			this.videoChooseShow = 2;
			setTimeout(() => {
				// this.$emit('isPlay');
				this.videoChooseShow = 0;
			}, 300);
			this.$emit('isClose');
		},
		toNext() {
			if (this.nextId) {
				let tempUrl = '/pages/video/video?compilationId=' + this.nextId + '&entry=autoredirect' + (this.nextTheater.fakeId ? '&fakeId=' + this.nextTheater.fakeId : '');
				uni.redirectTo({
					url: tempUrl
				});
			}
			this.isClose(false);
		},
		isShow(showType = 'finish') {
			this.showType = showType;
			this.videoChooseShow = 2;
			this.isTime = 5;
			if (showType == 'finish') {
				this.getNextTheater();
				this.timer = setInterval(() => {
					let tempTime = this.isTime;
					tempTime--;
					this.isTime = tempTime;
					if (tempTime == 0) this.toNext(false);
				}, 1000);
			}
			// this.$emit('isPause');
			setTimeout(() => {
				this.videoChooseShow = 1;
			}, 100);
		}
	},
	onLoad() {},
	onReady() {
		this.isShow();
	}
};
</script>

<style lang="scss">
.isBg {
	width: 931rpx;
	height: 409rpx;
	position: absolute;
	z-index: -1;
	left: -70rpx;
}
.content {
	.isPlayBox {
		z-index: 12;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.playName {
		font-size: 28rpx;
		color: white;
	}
	.lockBox {
		.isLock {
			width: 26rpx;
			height: 34rpx;
		}
		background: rgba(0, 0, 0, 0.6);
		border-bottom-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		right: 0;
		z-index: 99;
		top: 0;
	}
	.isSeq {
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		text-align: center;
		color: white;
		z-index: 11;
		font-size: 28rpx;
	}
	.imgBox {
		position: relative;
		width: 206rpx;
		border-radius: 13rpx;
		height: 256rpx;
		overflow: hidden;
	}
	.isImgMask {
		position: absolute;
		z-index: 10;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.imgItem {
		margin-top: 23rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.seq {
		text-align: center;
		line-height: 52rpx;
		width: 174rpx;
		height: 52rpx;
		color: #fd6f9f;
		font-size: 26rpx;
		border-radius: 26rpx;
		margin-bottom: 30rpx;
		margin-top: 16rpx;
		border: 1rpx solid #e1e1e1;
	}
	display: flex;
	flex-wrap: wrap;
	width: 100vw;
	padding: 0 5.6%;
	box-sizing: border-box;
	justify-content: space-between;
}

.isCloseTop::before {
	position: absolute;
	left: 0;
	right: 0;
	top: 17rpx;
	margin: auto;
	width: 82rpx;
	content: '';
	height: 10rpx;
	background-color: #d8d8d8;
	border-radius: 5rpx;
}
.isCloseTop {
	height: 49rpx;
	position: relative;
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dramaBoxAll {
	position: fixed;
	z-index: 103;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
}
.isMask {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 101;
	width: 100vw;
	height: 100vh;
	// background-color: #00000050;
}
.isChoose {
	height: 32rpx;
	width: 26rpx;
}
.dramaContent {
	flex-wrap: wrap;
	padding-left: 32rpx;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding-bottom: env(safe-area-inset-bottom);
}
.dramaItem {
	position: relative;
	margin-right: 14rpx;
	margin-bottom: 14rpx;
	color: #ffffff;
	font-size: 24rpx;
	width: 86rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 86rpx;
	background: #2a2a2a;
	border-radius: 8rpx;
}
.dramaBox {
	.dramaTitle {
		display: flex;
		font-weight: bold;
		align-items: center;
		color: #212121;
		font-size: 32rpx;
		padding-left: 44rpx;
		padding-right: 40rpx;
		justify-content: space-between;
	}
	position: absolute;
	z-index: 102;
	bottom: 0;
	color: black;
	overflow: hidden;
	bottom: 0;
	height: 757rpx;
	width: 100vw;
	background-color: white;
	border-radius: 19rpx 19rpx 0rpx 0rpx;
}

/* components/zwyNextTheater/zwyNextTheater.wxss */
.zwyNextBox {
	position: fixed;
	z-index: 100;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}
.zwyNextMask {
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.8);
}
.close {
	width: 100rpx;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 0;
	top: 0;
}
.zwyNextTips {
	width: 89vw;
	font-size: 26rpx;
	color: #424242;
	margin-top: 31rpx;
	text-align: center;
}

.zwyNextContentNomal {
	background: white;
}
.zwyNextContentNomal,
.zwyNextContent {
	position: absolute;
	bottom: 0;
	left: 0;
	transition: 0.3s;
	width: 100vw;
	transform: translateY(100%);
	height: 490rpx;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	background-position: 0 0;
	background-repeat: no-repeat;
	z-index: 102;
	background-size: 100% 100%;
}
.zwyNextDes {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 83rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.zwyNextDesLine {
	color: #404040;
	font-size: 32rpx;
	font-weight: bold;
}


//#ifdef MP-TOUTIAO
	.zwyNextBtn {
		position: absolute;
		bottom: 47rpx;
		left: 0;
		right: 0;
		margin: auto;
		width: 378rpx;
		height: 80rpx;
		background: linear-gradient(340deg, #D283FF 0%, #7BB1FD 100%);
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		font-size: 34rpx;
		justify-content: center;
		font-weight: bold;
		color: #ffffff;
	}
//#endif

//#ifdef MP-KUAISHOU
	.zwyNextBtn {
		position: absolute;
		bottom: 47rpx;
		left: 0;
		right: 0;
		margin: auto;
		width: 378rpx;
		height: 80rpx;
		background: #f66e8e;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		font-size: 34rpx;
		justify-content: center;
		font-weight: bold;
		color: #ffffff;
	}
//#endif
.isTranf {
	transform: translateY(0) !important;
}
.zwyNextDingyue {
	width: 361rpx;
	height: 68rpx;
	background: #ff7200;
	border-radius: 12rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #ffffff;
	line-height: 42rpx;
	text-align: center;
	line-height: 68rpx;
	position: absolute;
	bottom: 108rpx;
	left: 0;
	right: 0;
	margin: auto;
}
</style>
